<!DOCTYPE html>
<html lang="en" class="app">

<head>
  <meta charset="utf-8" />
  <title>Notebook | Web Application</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
  />

  <link rel="stylesheet" href="css/bootstrap.css" type="text/css"
  />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"
  />
  <link rel="stylesheet" href="less/app.css" type="text/css" />
  <link rel="stylesheet" href="less/message.css" type="text/css"
  />
  <!--[if lt IE 9]>
    <script src="plugins/ie/html5shiv.js"></script>
    <script src="plugins/ie/respond.min.js"></script>
    <script src="plugins/ie/excanvas.js"></script>
  <![endif]-->
</head>

<body>
  <section class="vbox">
    <!-- header -->
    <header class="bg-dark dk header navbar navbar-fixed-top-xs">
      <div class="navbar-header aside-md">
        <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open"
          data-target="#nav,html">
          <i class="fa fa-bars"></i>
        </a>
        <a href="#" class="navbar-brand" data-toggle="fullscreen">
          <img src="images/logo.png" class="m-r-sm">Notebook</a>
        <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".nav-user">
          <i class="fa fa-cog"></i>
        </a>
      </div>
      <ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="thumb-sm avatar pull-left">
              <img src="images/avatar.jpg">
            </span>
            John.Smith
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu animated fadeInRight">
            <span class="arrow top"></span>
            <li>
              <a href="#">Settings</a>
            </li>
            <li>
              <a href="profile.html">Profile</a>
            </li>
            <li>
              <a href="#">
                <span class="badge bg-danger pull-right">3</span>
                Notifications
              </a>
            </li>
            <li>
              <a href="docs.html">Help</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="modal.lockme.html" data-toggle="ajaxModal">Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </header>

    <!-- section -->
    <section>
      <section class="hbox stretch">
        <!-- left -->
        <aside class="bg-dark lter aside-md hidden-print" id="nav">
          <section class="vbox">
            <section class="w-f scrollable">
              <div class="slim-scroll" data-height="auto" data-disable-fade-out="true"
                data-distance="0" data-size="5px" data-color="#333333">
                <nav class="nav-primary hidden-xs">
                  <ul class="nav">
                    <li name="salers">
                      <a href="javascript:;">
                        <i class="fa fa-columns icon">
                          <b class="bg-warning"></b>
                        </i>
                        <span class="pull-right">
                          <i class="fa fa-angle-down text"></i>
                          <i class="fa fa-angle-up text-active"></i>
                        </span>
                        <span>商家</span>
                      </a>
                      <ul class="nav lt">
                        <li>
                          <a href="salers.html">
                            <i class="fa fa-angle-right"></i>
                            <span>商家管理</span>
                          </a>
                        </li>
                        <li>
                          <a href="redBagManage.html">
                            <i class="fa fa-angle-right"></i>
                            <span>红包管理</span>
                          </a>
                        </li>
                        <li>
                          <a href="djq.html">
                            <i class="fa fa-angle-right"></i>
                            <span>代金券管理</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li name="order">
                      <a href="order.html">
                        <i class="fa fa-pencil icon">
                          <b class="bg-info"></b>
                        </i>
                        <span>订单管理</span>
                      </a>
                    </li>
                    <li name="identify">
                      <a href="identify.html">
                        <i class="fa fa-pencil icon">
                          <b class="bg-danger"></b>
                        </i>
                        <span>认证信息</span>
                      </a>
                    </li>
                    <li name="balance">
                      <a href="balance.html">
                        <i class="fa fa-pencil icon">
                          <b class="bg-primary"></b>
                        </i>
                        <span>余额管理</span>
                      </a>
                    </li>
                    <li name="salers">
                      <a href="javascript:;">
                        <i class="fa fa-columns icon">
                          <b class="bg-warning"></b>
                        </i>
                        <span class="pull-right">
                          <i class="fa fa-angle-down text"></i>
                          <i class="fa fa-angle-up text-active"></i>
                        </span>
                        <span>官方账号</span>
                      </a>
                      <ul class="nav lt">
                        <li>
                          <a href="messageList.html">
                            <i class="fa fa-angle-right"></i>
                            <span>消息列表</span>
                          </a>
                        </li>
                        <li>
                          <a href="">
                            <i class="fa fa-angle-right"></i>
                            <span>群发消息</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </nav>
              </div>
            </section>

            <!-- 缩小到侧边栏 -->
            <footer class="footer lt hidden-xs b-t b-dark">
              <a href="#nav" data-toggle="class:nav-xs" class="pull-right btn btn-sm btn-dark btn-icon">
                <i class="fa fa-angle-left text"></i>
                <i class="fa fa-angle-right text-active"></i>
              </a>
            </footer>
          </section>
        </aside>
        <!-- left -->

        <section class="vbox">
          <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
              <li>
                <i class="fa fa-home"></i>首页
              </li>
              <li>
                群发消息
              </li>
            </ul>
            <section class="panel panel-default">
              <div class="panel-body">
                <div class="chatContent">

                </div>
                <div class="sendMessage">
                  <div class="emotion_editor">
                    <!-- <div class="edit_area js_editorArea" style="display: none;"></div> -->
                    <textarea class="edit_area js_editorArea" style="overflow-y: auto; overflow-x: hidden;"></textarea>
                    <div class="editor_toolbar">
                      <a href="javascript:void(0);" class="icon_emotion emotion_switch js_switch"></a>
                      <div class="emotion_wrp js_emotionArea">
                        <span class="hook">
                          <span class="hook_dec hook_top"></span>
                          <span class="hook_dec hook_btm"></span>
                        </span>
                        <ul class="emotions" onselectstart="return false;">
                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_0"
                              data-title="[笑]" style="background-position:0 -1766px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_1"
                              data-title="[大笑]" style="background-position:0 -616px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_2"
                              data-title="[憨笑]" style="background-position:0 -1582px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_3"
                              data-title="[破涕为笑]" style="background-position:0 -1858px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_4"
                              data-title="[眯眼笑]" style="background-position:0 -341px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_5"
                              data-title="[吐舌]" style="background-position:0 -432px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_6"
                              data-title="[眨眼]" style="background-position:0 -524px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_7"
                              data-title="[眼红]" style="background-position:0 -800px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_8"
                              data-title="[亲亲]" style="background-position:0 -1352px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_9"
                              data-title="[热恋]" style="background-position:0 -116px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_10"
                              data-title="[惊讶]" style="background-position:0 -754px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_11"
                              data-title="[震惊]" style="background-position:0 -892px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_12"
                              data-title="[累]" style="background-position:0 -984px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_13"
                              data-title="[头晕]" style="background-position:0 -1076px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_14"
                              data-title="[疲惫]" style="background-position:0 -1168px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_15"
                              data-title="[口罩]" style="background-position:0 -1260px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_16"
                              data-title="[难过]" style="background-position:0 -1444px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_17"
                              data-title="[不开心]" style="background-position:0 -1536px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_18"
                              data-title="[呆滞]" style="background-position:0 -1674px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_19"
                              data-title="[冥思]" style="background-position:0 -1720px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_20"
                              data-title="[痛苦]" style="background-position:0 -1812px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_21"
                              data-title="[懵逼]" style="background-position:0 -1904px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_22"
                              data-title="[流汗]" style="background-position:0 -249px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_23"
                              data-title="[嘚瑟]" style="background-position:0 -204px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_24"
                              data-title="[酷]" style="background-position:0 -160px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_25"
                              data-title="[哭]" style="background-position:0 -1628px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_26"
                              data-title="[生病]" style="background-position:0 -76px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_27"
                              data-title="[受伤]" style="background-position:0 -1490px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_28"
                              data-title="[睡觉]" style="background-position:0 -34px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_29"
                              data-title="[思考]" style="background-position:0 -1306px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_30"
                              data-title="[天使]" style="background-position:0 -1214px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_31"
                              data-title="[闭嘴]" style="background-position:0 -1122px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_32"
                              data-title="[害怕]" style="background-position:0 -1030px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_33"
                              data-title="[奸笑]" style="background-position:0 -938px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_34"
                              data-title="[离线]" style="background-position:0 -846px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_35"
                              data-title="[斜眼]" style="background-position:0 -708px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_36"
                              data-title="[哭泣]" style="background-position:0 -662px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_37"
                              data-title="[恐惧]" style="background-position:0 -570px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_38"
                              data-title="[愤怒]" style="background-position:0 -478px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_39"
                              data-title="[恶魔]" style="background-position:0 -387px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_40"
                              data-title="[中毒]" style="background-position:0 -295px;"></span>
                          </li>
                        </ul>
                        <span class="emotions_preview js_emotionPreviewArea"></span>
                      </div>
                    </div>
                  </div>
                </div>
                <span class="btn btn-primary m-t-md btn-s-sm" onclick="sendMessage()">发送</span>
              </div>
            </section>
          </section>
        </section>
      </section>
    </section>
  </section>


  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- App -->
  <script src="js/app.js"></script>
  <!--引入layer-->
  <script src="plugins/layer/layer.js"></script>

  <script src="js/NIM_Web_NIM_v4.8.0.js"></script>

  <script>
    function sendMessage() {
      layer.confirm('发送广播消息后，全部APP用户都会收到此消息，确定发送吗？', function (index, layero) {
        $.post('https://www.easy-mock.com/mock/5a62ddfebb42af543c43d2db/example/upload', { msg: $(".js_editorArea").val() }, function (res) {
          if (res.result) {
            layer.msg('提交成功', { time: 2000 }, function () {
              var html = '';
              html += '<div class="server YOMO m-b-md">' +
                '<img src="images/YOMO.png">' +
                '<block>' +
                '<small class="m-r text-muted">' + format(new Date()) + '</small>' +
                '<span class="hook">' +
                '<span class="hook_dec hook_top"></span>' +
                '<span class="hook_dec hook_btm"></span>' +
                '</span>' +
                '<div class="m-r">' + buildemo($(".js_editorArea").val()) + '</div>' +
                '</block>' +
                '</div>';
              $('.chatContent').append(html);
              $(".js_editorArea").val("");
              scrollToEnd();
              // location.reload();
            });
          } else {
            layer.alert('提交失败:' + res.msg);
          }
        })
      });
    }
    var emoji = { "[笑]": { file: "emo-001@2x.png" }, "[大笑]": { file: "emo-002@2x.png" }, "[憨笑]": { file: "emo-003@2x.png" }, "[破涕为笑]": { file: "emo-004@2x.png" }, "[眯眼笑]": { file: "emo-005@2x.png" }, "[吐舌]": { file: "emo-006@2x.png" }, "[眨眼]": { file: "emo-007@2x.png" }, "[眼红]": { file: "emo-008@2x.png" }, "[亲亲]": { file: "emo-009@2x.png" }, "[热恋]": { file: "emo-010@2x.png" }, "[惊讶]": { file: "emo-011@2x.png" }, "[震惊]": { file: "emo-012@2x.png" }, "[累]": { file: "emo-013@2x.png" }, "[头晕]": { file: "emo-014@2x.png" }, "[疲惫]": { file: "emo-015@2x.png" }, "[口罩]": { file: "emo-016@2x.png" }, "[难过]": { file: "emo-017@2x.png" }, "[不开心]": { file: "emo-018@2x.png" }, "[呆滞]": { file: "emo-019@2x.png" }, "[冥思]": { file: "emo-020@2x.png" }, "[痛苦]": { file: "emo-021@2x.png" }, "[懵逼]": { file: "emo-022@2x.png" }, "[流汗]": { file: "emo-023@2x.png" }, "[嘚瑟]": { file: "emo-024@2x.png" }, "[酷]": { file: "emo-025@2x.png" }, "[哭]": { file: "emo-026@2x.png" }, "[生病]": { file: "emo-027@2x.png" }, "[受伤]": { file: "emo-028@2x.png" }, "[睡觉]": { file: "emo-029@2x.png" }, "[思考]": { file: "emo-030@2x.png" }, "[天使]": { file: "emo-031@2x.png" }, "[闭嘴]": { file: "emo-032@2x.png" }, "[害怕]": { file: "emo-033@2x.png" }, "[奸笑]": { file: "emo-034@2x.png" }, "[离线]": { file: "emo-035@2x.png" }, "[斜眼]": { file: "emo-036@2x.png" }, "[哭泣]": { file: "emo-037@2x.png" }, "[恐惧]": { file: "emo-038@2x.png" }, "[愤怒]": { file: "emo-039@2x.png" }, "[恶魔]": { file: "emo-040@2x.png" }, "[中毒]": { file: "emo-041@2x.png" } };
    /**
    * 通过正则替换掉文本消息中的emo表情
    * @param text：文本消息内容
    */
    function buildemo(text) {
      var re = /\[([^\]\[]*)\]/g;
      var matches = text.match(re) || [];
      for (var j = 0, len = matches.length; j < len; ++j) {
        if (emoji[matches[j]]) {
          text = text.replace(matches[j], '<img class="emo" src="images/emoji/' + emoji[matches[j]].file + '" />');
        }
      }
      return text;
    }
    // 滚动到对话框底部
    function scrollToEnd() {
      var div = document.getElementsByClassName('chatContent')[0];
      div.scrollTop = div.scrollHeight;
    }

    function add0(m) { return m < 10 ? '0' + m : m }
    function format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
    }

    $(function () {
      $('.js_switch').click(function (e) {
        e.stopPropagation;
        $('.js_emotionArea').toggle();
      })

      document.addEventListener('click', function () {
        if ($('.emotion_wrp').css('display') == 'block')
          $('.emotion_wrp').hide();
      }, true)

      $('.emotions_item .js_emotion_i').each(function (k, v) {
        $(this).on('click', function () {
          var html = $(this).data('title');
          $('.js_editorArea').val($('.js_editorArea').val() + html);
        })
      })
    })
  </script>
</body>

</html>